<template>
  <div class="modal-header">
    <div class="modal-title">
      <span>{{ l('Copy') }}</span>
    </div>
    <a-form-model layout="vertical" ref="copyForm" :rules="rules" :model="copyForm">
      <a-row class="copyDiv">
        <a-col :span="12">
          <a-form-model-item class="labelStyle" required colon :label="l('labelName')">
            <a-input
              name="value"
              type="text"
              v-model="copyForm.value"
              disabled
              style="width: 200px"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item
            class="labelStyle"
            :label="l('Target Instance Name')"
            prop="copyValue"
            ref="copyValue"
          >
            <a-input
              name="copyValue"
              type="text"
              v-model="copyForm.copyValue"
              style="width: 200px"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <div class="bottom">
        <a-button @click="closeForm">{{ l('Cancel') }}</a-button>
        <!-- <a-button type="primary" :disabled="copyForm.copyValue == ''" @click="save">
                    {{
                    l("Save")
                    }}
                </a-button>-->
        <a-button type="primary" @click="save">
          {{ l('Save') }}
        </a-button>
      </div>
    </a-form-model>
  </div>
</template>

<script>
  import { ModalComponentBase } from '/@/shared/component-base';

  export default {
    name: 'g-copy-ndo',
    mixins: [ModalComponentBase],
    data() {
      return {
        rules: {
          copyValue: [
            {
              required: true,
              message: '此项不能为空',
              trigger: 'blur',
            },
            {
              pattern: /^[^\s]+(\s+[^\s]+)*$/,
              message: '不符合输入规范',
              trigger: 'blur',
            },
          ],
        },
        copyForm: {
          value: '',
          copyValue: '',
        },
        entity: {},
        labelName: '',
        /*             value: "",
            copyValue: "", */
        id: null,
      };
    },
    created() {
      this.fullData(); // 模态框必须,填充数据到data字段
      this.id = this.entity.id;
      this.labelName = this.entity.name;
      this.copyForm.copyValue = 'Copy_of_' + this.entity.value;
      this.copyForm.value = this.entity.value;
    },
    methods: {
      closeForm() {
        this.close();
      },
      save() {
        this.$refs.copyForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          let res = {
            id: this.id,
            name: this.copyForm.copyValue,
          };
          this.success(res);
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .modal-header {
    display: flex;
    flex-direction: column;
    margin-top: -10px;
  }
  .copyDiv {
    margin-top: 20px;
  }
  .bottom {
    margin-top: 20px;
    text-align: right;
    margin-right: 20px;
    button {
      padding: 10px 30px 30px;
    }
    .modal-title {
      float: left;
    }
  }
</style>
